"use client";
import { Button ,Row,Col, Card, Flex, Typography, Space, Rate} from 'antd';
import { CrownOutlined, FileProtectOutlined, HddOutlined } from "@ant-design/icons";
import LearningTable from '@/components/LearningTable';
import UserProgress from '@/components/UserProgress';
const {Title} = Typography;

export default function Home() {
  return (
    <Row gutter={16}>
    <Col span={17}> 
     <Row gutter={16}> 
        <Col span={8}>
          <Card>
            <Flex align="center" gap={16}>
              <div className="text-2xl flex items-center justify-center rounded-md h-12 w-12 bg-red-200 ">
                <CrownOutlined />
              </div>
              <div>
                <Title level={4} style={{marginButton: 0}}>24</Title>
                <Typography>Enrolled courses</Typography>
              </div>
            </Flex>
          </Card>
        </Col>
        <Col span={8}>
          <Card>
            <Flex align="center" gap={16}>
              <div className="text-2xl flex items-center justify-center rounded-md h-12 w-12 bg-green-200 ">
                <HddOutlined/>
              </div>
              <div>
                <Title level={4} style={{marginButton: 0}}>56</Title>
                <Typography>Lessons</Typography>
              </div>
            </Flex>
          </Card>
        </Col>
        <Col span={8}>
          <Card>
            <Flex align="center" gap={16}>
              <div className="text-2xl flex items-center justify-center rounded-md h-12 w-12 bg-blue-200 ">
                <FileProtectOutlined/>
              </div>
              <div>
                <Title level={4} style={{marginButton: 0}}>17</Title>
                <Typography>Certificates</Typography>
              </div>
            </Flex>
          </Card>
        </Col>
     </Row>
     <LearningTable />
    </Col>



    
    <Col span={7}>
      <UserProgress />
      <Title level={5}>Popular Courses</Title>
      <Space direction="vertical" className="w-full">
        <Card>
          <Title level={5}>Python Basic</Title>
          <Rate disabled defaultValue={2}></Rate>
        </Card>
        <Card>
          <Title level={5}>Next JS Crash Course</Title>
          <Rate disabled defaultValue={4}></Rate>
        </Card>
      </Space>
    </Col>
  </Row>
  );
}
